<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {ref,defineComponent} from "vue";

export default defineComponent({
  name: "BasePieChart",
  data(){
    let load = false
    const colorList1 = [ 'rgb(61, 188, 190)','', 'rgb(50, 84, 221)','', 'rgb(43, 142, 243)','', 'rgb(190, 229, 251)','', 'rgb(60, 212, 149)','']
    const colorList2 =  [ 'rgb(61, 188, 190,0.5)','', 'rgb(50, 84, 221,0.5)','', 'rgb(43, 142, 243,0.5)', '','rgb(190, 229, 251,0.5)', '','rgb(60, 212, 149,0.5)','']
    let total = 0
    let dataList = []
    const moduleContent = { '未指派': 420, '一致派': 380, '以进行': 100 ,'未进行': 70, '过期': 30}
    let sum = 0
    const chartdata = []
    for (const i in moduleContent) {
      chartdata.push({
        name: i,
        value: moduleContent[i] || 1
      })
      sum += Number(moduleContent[i] || 0)
    }
    total = sum
    dataList = chartdata
    const data1 = []
    chartdata.forEach((item) => {
      const _item = { ...item }
      if (!_item.value) {
        _item.value = sum / 100
      }
      data1.push(_item, {
        name: '',
        value: sum / 100,
        label: { show: false },
        itemStyle: {
          color: 'transparent'
        }
      })
    })

    let option = {
      backgroundColor: '#fff0',
      title: {
        text: '类型占比',
        left: 'center',
        top: '45%',
        show: true,
        itemGap: 10,
        textStyle: {
          color: '#fff',
          fontSize: '27',
          fontWeight: 500
        },
        subtext: '共计',
        subtextStyle: {
          color: 'rgba(255,255,255,0.5)',
          fontSize: '20',
          fontWeight: 600
        }
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter(params) {
          if(params.data.name){
            return `${params.name + ':' + params.data.value}`
          }
        },
        // formatter: "{b}: {c} "+" | "+"{d}%",
        textStyle: {
          fontSize: 18,
          color: 'rgba(255,255,255,0.8)'
        },
        borderColor: 'rgba(255,255,255,0.9)',
        backgroundColor: 'rgba(255,255,255,0.5)',
        extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(255,255,255,0.5);'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '72%'],
          center: ['50%', '50%'],
          minAngle: 1,
          labelLine: {
            show: false
          },
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList1[params.dataIndex]
              }
            }
          },
          data: data1,
          z: 666
        },
        {
          type: 'pie',
          radius: ['80%', '85%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          minAngle: 1,
          emphasis: { scale: false },
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList2[params.dataIndex]
              }
            }
          },
          data: data1,
          z: 1
        },
      ]
    }
    return{
      option: ref(option),
      load: ref(load)
    }
  }

})
</script>

<style scoped>

</style>